
var mouseHeld = false;

function drag(slotId) {
    if (mouseHeld) {
        toggle(slotId);
    }
}

function down(slotId) {
    toggle(slotId);
    mouseHeld = true;
}

function up() {
    mouseHeld = false; 
}

function include(obj,arr) {
    return (arr.indexOf(obj) != -1);
}

function toggle(slotId) 
{
 slot = document.getElementById(slotId);
 box = document.getElementById('b' + slotId);
 if (slot.style.backgroundColor == "white" && box.checked == false) 
 {
  slot.style.backgroundColor = "yellow";
  box.checked = true;
 }
 else {
  slot.style.backgroundColor = "white";
  box.checked = false;
 }
}

function setclass(slotId, shifts) 
{
 //slot = document.getElementById(slotId);
 //box = document.getElementById('b' + slotId);
 if (include(slotId,shifts)) 
 {
  document.getElementById(slotId).className = "display";
 }
 else
 {
  document.getElementById(slotId).className = "invisible";
 }
}

</script>

<style type="text/css">
 .test{border:1px solid black}
 .display{border:1px solid black}
    th::selection {
 background: #ffffff;
    }
    th::-moz-selection {
 background: #ffffff;
    }
 td{border:1px solid black}
 .hid{display:none}
 .invisible{visibility:hidden}
 
</style>

</head>

<body>
<div align="center">
<p class="main">
    <b>Hello! Please submit your availabilty below by highlighting the times you are available in the calendar below:</b>
</p>

<script language="JavaScript">
document.write("<h1>"+calName+"</h1>");
</script>  
    
 <table onMouseUp="up();">
  <tr>
   <th>Time</th>
   <th>Sunday</th>
   <th>Monday</th>
   <th>Tuesday</th>
   <th>Wednesday</th>
   <th>Thursday</th>
   <th>Friday</th>
   <th>Saturday</th>
  </tr>
  <script language="JavaScript">
  
  var i = 1;
  var j = 1;
  for (i=1;i<=15;i++) 
  {t
   document.write("<tr>");
   if (i < 5) {document.write("<th>"+(i+7)+" - "+(i+8)+" a.m."+"</th>"); }
   else if (i == 5) {document.write("<th>"+"noon - 1 p.m."+"</th>"); }
   else if (i == 15) {document.write("<th>"+"11 - midnight"+"</th>"); }
   else { document.write("<th>"+(i-4)+" - "+(i-3)+" p.m."+"</th>"); }
   for (j=1; j<=7; j++) 
   {
    var ID = String(j) + "_" + String(i);
    document.write('<td onMouseOver="drag(\''+ID+'\');" onMouseDown="down(\''+ID+'\');" id="'+ID+'" style="background-color:white"><div><a href="" action="/upForGrabs" />Put it Up For Grabs!</div></td>'); 
   }
   document.write("</tr>");
  }
  
  var k = 1;
  var l = 1;
  for (k=1;k<=15;k++) 
  {
  for (l=1; l<=7; l++) 
   {
   var ID = String(l) + "_" + String(k);
   setclass(ID,myshifts);
   }
  }
  
  </script> 
  
 </table>
<form method="post" action="/submitAvail">

<script language="JavaScript">

 var i = 1;
 var j = 1;
  for (i=1;i<=15;i++) 
  {
   for (j=1; j<=7; j++) 
   {
    var ID = "b"+ String(j) + "_" + String(i);
    document.write('<input type="checkbox" name="'+ID+'" id="'+ID+'" class="hid">'); 
   }
   document.write("</tr>");
  }
  
</script>
<p class="main">
    Please submit your e-mail address below:
</p>  
<input type="text" name="email" size=35/>
    <br>
<input type="submit" style="width: 14em"/>
</form>
</div>
</body>
</html>

